<template>
	<div class="layout-pd">
		<el-card shadow="hover" v-loading="state.loading">
			<el-tabs v-model="state.activeName" @tab-click="handleClick">
                <el-tab-pane label="基础信息" name="first">
                    <jcxx ref="jcxxRef" @stepChange="stepChange"></jcxx>
                </el-tab-pane>
				<el-tab-pane label="商品规格" name="second">
                    <spgg ref="spggRef" @stepChange="stepChange"></spgg>
                </el-tab-pane>
                <el-tab-pane label="商品详情" name="third">
                    <spxq ref="spxqRef" @stepChange="stepChange"></spxq>
                </el-tab-pane>
                <el-tab-pane label="商品权限" name="fourth">
                    <spqx ref="spqxRef" @stepChange="stepChange"></spqx>
                </el-tab-pane>
                <el-tab-pane label="积分设置" name="fifth">
                    <jfsz ref="jfszRef" @stepChange="stepChange"></jfsz>
                </el-tab-pane>
                <el-tab-pane label="会员折扣" name="sixth">
                    <hyzk ref="hyzkRef" @stepChange="stepChange"></hyzk>
                </el-tab-pane>
                <el-tab-pane label="佣金设置" name="seventh">
                    <yjsz ref="yjszRef" @stepChange="stepChange"></yjsz>
                </el-tab-pane>
            </el-tabs>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive, ref,defineAsyncComponent } from 'vue';
import type { storeNodeListData, channelListData } from "/@/types/order";
import { storeNodeList } from '/@/api/order';
export type TStep = 'first' | 'second' | 'third' | 'fifth' | 'fourth' | 'sixth' | 'seventh';

const jcxx = defineAsyncComponent(() => import('/@/views/commodity/cardList/components/jcxx.vue'))
const spgg = defineAsyncComponent(() => import('/@/views/commodity/cardList/components/spgg.vue'))
const spxq = defineAsyncComponent(() => import('/@/views/commodity/cardList/components/spxq.vue'))
const spqx = defineAsyncComponent(() => import('/@/views/commodity/cardList/components/spqx.vue'))
const jfsz = defineAsyncComponent(() => import('/@/views/commodity/cardList/components/jfsz.vue'))
const hyzk = defineAsyncComponent(() => import('/@/views/commodity/cardList/components/hyzk.vue'))
const yjsz = defineAsyncComponent(() => import('/@/views/commodity/cardList/components/yjsz.vue'))

const jcxxRef = ref();
const spxqRef = ref();

const state = reactive({
    activeName: 'first' as TStep,
	param: {
		type: 4,
		source: 0, // 0 门店 2 线上 //设置不了得值是哪个？
		mode: null, // 门店类型  null(默认) 全部 0 直营  1 加盟
		storeStatus:-1,
		nodeId: null, // 门店id
		// 销售渠道
		channel: null,
		status: null,
		cardType:-1,
		// 支付方式
		dateTime: [],
		startTime: "",
		endTime: "",
		timeInterval: 3,
		total: 0,
		keyword: "",
		pageNum: 1,
		pageSize: 10,
		change: 999,
		storeType: null as null | number,
		statistics: 1,
		rowId: -1
	},
	query: {
		orderSource: [
			{ value: 0, label: '门店订单' },
		],
		storeType: [
			{ value: null, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		storeStatus:[
			{ value: -1, label: '全部' },
			{ value: 1, label: '正常' },
			{ value: 2, label: '闭店' },
			{ value: 3, label: '休息' }
		],
		staticticsCategory: [
			{ value: 1, label: '卡项销售' },
			{ value: 2, label: '卡项普及' },
			{ value: 3, label: '卡项消耗' },
			{ value: 4, label: '大数据画像' },
		],
		cardType: [
			{ value: -1, label: '全部' },
			{ value: 0, label: '疗程卡' },
			{ value: 1, label: '单次卡' },
			{ value: 2, label: '体验卡' },
		],
		storeList: [] as Array<storeNodeListData>,
		orderStatus: [
			{ value: null, label: '全部' },
			{ value: 4, label: '已服务' },
			{ value: 14, label: '已撤销' },
		],
		saleChannel: [] as Array<channelListData>,
		orderType:[
			{ value: 999, label: '全部订单' },
			{ value: 1, label: '换卡服务' },
			{ value: 2, label: '余卡服务' },
		]
	},
	loading: false,
	total: 0,
	tableData: [
		{
			id: 1,
			cardItemName: '测试',
			property: '属性名称',
			spec: '规格',
			salesVolume: '销量',
			cellPrice: '销售价格',
			cellRatio: '销售占比',
			notUsedPrice: '未消耗金额',
			notUsedRatio: '未消耗占比',
			popularizePeple: '普及人数',
			popularizeRatio: '普及率',
			holdPeple: '持有人数',
			holdRatio: '持有率',
			lossPeple: '流失人数',
			lossRatio: '流失率',
			serviceCount: '服务量',
			consume: '消耗业绩',
			averageMonth: '月平均',
			averagePeple: '人平均',
			price: '客单价',
			repurchaseCycle: '复购周期',
			serviceGoodRatio: '服务好评率',
			sexRatio: '男女比例',
			age: '年龄'
		}
	] as Array<any>
		
});

const disabledDate= (time: Date) => time.getTime() > Date .now();

const shortcuts = [
	{
		text: '本月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.setDate(1))
		return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
		return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
		return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
		return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
		return [start, end]
		},
	},
]

/**
 * 获取门店列表
 * mode  null /全部   0直营  1加盟
 */
 const getStoreNodeList = async () => {
	const { results } = await storeNodeList({ mode: null, current: 1, size: 50 });
	let no1 = [{id:null,name:'全部'}]
	state.query.storeList = [...no1, ...results.records];
}



const cardDialogVisble = ref(false)
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
]

const search = () => {}

const handleSizeChange = () => {}
const handleCurrentChange = () => {}
const previewInfo = (id: number) => {
	state.param.rowId = id
	cardDialogVisble.value = true
}

const handleClick = ()=>{
    
}

const stepChange = (step: TStep) => {
	console.log(step);
	
	state.activeName = step
}

// 页面加载时
onMounted(() => {
	getStoreNodeList()
});
</script>

<style scoped lang="scss">
</style>
